<template>
	<view class="container">
		<view class="header" @tap="skip(`/pages/user/userDetail`)">
			<view class="left">
				<view class="img">
					<image mode="aspectFit" :src="resBaseUrl + 'user/tou.png'" alt="" />
				</view>
				<view class="text">
					<view class="username"> {{userInfo.mchCompany}} </view>
					<view> 用户名:{{userInfo.userLoginId}} </view>
				</view>
			</view>
			<div class="right">
				<image mode="aspectFit" :src="resBaseUrl + 'user/rightfff.png'" alt="" />
			</div>
		</view>
		<view class="list">
			<!-- <navigator url="/pages/user/mymsg"> -->
			<view @tap="skip('/pages/user/mymsg')" class="list_item first">
				<view class="left">
					<image mode="aspectFit" :src="resBaseUrl + 'user/msg.png'" alt="" />
					<text>我的消息</text>
				</view>
				<view class="right">
					<image mode="aspectFit" @tap="skip('/pages/user/mymsg')" :src="resBaseUrl + 'user/right.png'"
						alt="" />
				</view>
			</view>
			<!-- </navigator> -->
			<!-- <navigator url="/pages/user/customer"> -->
			<view @tap="skip('/pages/user/customer')" class="list_item">
				<view class="left">
					<image mode="aspectFit" :src="resBaseUrl + 'user/kefu.png'" alt="" />
					<text>我的客服</text>
				</view>
				<view class="right">
					<image mode="aspectFit" :src="resBaseUrl + 'user/right.png'" alt="" />
				</view>
			</view>
			<!-- </navigator> -->
			<!-- <navigator url="/pages/login/index"> -->
			<view @tap="openVersionPopup" class="list_item">
				<view class="left">
					<image mode="aspectFit" :src="resBaseUrl + 'user/book.png'" alt="" />
					<text>最新版本</text>
					<view v-if="!contrastVersion" style="background-color: red;width: 15rpx;height: 15rpx;border-radius: 50%;margin-left: 15rpx;"></view>
				</view>
				<view class="right">
					<text style="margin-right: 40rpx;">V{{saveAppVersion}}</text>
					<image mode="aspectFit" :src="resBaseUrl + 'user/right.png'" alt="" />
				</view>
			</view>
			<!-- </navigator> -->
			<view @tap="skip('/pages/user/feedback')" class="list_item">
				<view class="left">
					<image mode="aspectFit" :src="resBaseUrl + 'user/msg.png'" alt="" />
					<text>意见反馈</text>
				</view>
				<view class="right">
					<image mode="aspectFit" :src="resBaseUrl + 'user/right.png'" alt="" />
				</view>
			</view>
			<view @tap="skip('/pages/setup/Bluetooth')" class="list_item">
				<view class="left">
					<image mode="aspectFit" :src="resBaseUrl + 'user/lanya.png'" alt="" />
					<text>设置蓝牙</text>
				</view>
				<view class="right">
					<image mode="aspectFit" :src="resBaseUrl + 'user/right.png'" alt="" />
				</view>
			</view>
			<view @tap="skip('/pages/user/myLog')" class="list_item">
				<view class="left">
					<image mode="aspectFit" :src="resBaseUrl +  'user/msg.png'" alt="" />
					<text>我的日志</text>
				</view>
				<view class="right">
					<image mode="aspectFit" :src="resBaseUrl + 'user/right.png'" alt="" />
				</view>
			</view>
			<view @tap="logout" class="list_item">
				<view class="left">
					<image mode="aspectFit" :src="resBaseUrl + 'user/xunhuan.png'" alt="" />
					<text>切换账号</text>
				</view>
				<view class="right">
					<image mode="aspectFit" :src="resBaseUrl + 'user/right.png'" alt="" />
				</view>
			</view>
			
		
			<!-- <navigator url="/pages/user/update"> -->

			<!-- </navigator> -->
			<!-- <navigator url="/pages/login/index"> -->
			<!-- 	<view @tap="skip('/pages/login/index')" class="list_item">
				<view class="left">
					<image mode="aspectFit" :src="resBaseUrl+'user/out.png'" alt="" />
					<text>注销账号</text>
				</view>
				<view class="right">
					<image mode="aspectFit" :src="resBaseUrl+'user/right.png'" alt="" />
				</view>
			</view> -->
			<!-- </navigator> -->
		</view>
		<view class="footer"> 台州魔简科技提供技术支持 <p style="margin-top: 20rpx;">客户端的版本号V{{saveAppVersion}}</p></view>
		<versionPopup ref="versionPopup"></versionPopup>
		<!-- #ifdef MP-WEIXIN -->
		<myTabBar :showIndex="3"/>
		<!-- #endif -->
	</view>
</template>

<script>
	import versionPopup from "@/components/versionPopup.vue"
	import myTabBar from "@/components/myTabBar.vue"
	var app = getApp();
	export default {
		components:{
			versionPopup,
			myTabBar
		},
		name: "user",
		data() {
			const _this = this
			return {
				resBaseUrl: _this.resBaseUrl,
				modalShow: false,
				userInfo: {},
				imgUrl: "",
				avatarUrl: "",
				saveAppVersion:"",
				contrastVersion:false
			};
		},
		onShow() {
			this.userInfo = app.globalData.userInfo;
			var versionInfo = app.globalData.versionInfo;
			this.saveAppVersion = versionInfo['appVersion'];
			this.$nextTick(()=>{
				this.contrastVersion = this.$refs.versionPopup.contrastVersion
				// console.log(this.contrastVersion);
			})
			// this.$api.userInfoApi().then((res) => {
			// 	if (res.code == 200) {
			// 		// this.userInfo = res.result
			// 		this.$store.commit('changeMid', res.result.mid)
			// 	}
			// });
		},
		methods: {
			openVersionPopup(){
				this.$refs.versionPopup.open()
			},
			login() {
				uni.$u.route("/pages/login/index");
			},
			logout() {
				uni.removeStorageSync("auto");
				uni.navigateTo({
					url: "/pages/login/index",
				});
				uni.showToast({
					title: "退出成功",
					icon: "none",
				});
				uni.removeStorageSync("token");
			},
		},
	};
</script>

<style scoped lang="scss">
	page {
		background-color: #f1f1f1;
	}

	.container {
		background-color: #f1f1f1;
		height: 100vh;

		.header {
			width: 100%;
			height: 300rpx;
			background: url("/static/images/user/bg.png") 37% 85%;
			background-size: 134% 146%;
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				position: absolute;
				left: 26rpx;
				top: 90rpx;
				display: flex;
				align-items: center;
				color: #fff;

				.img {
					margin-right: 46rpx;

					image {
						width: 132rpx;
						height: 132rpx;
					}
				}

				.text {
					.username {
						margin-bottom: 30rpx;
						font-size: 1.125rem;
					}
				}
			}

			.right {
				position: absolute;
				right: 44rpx;

				image {
					width: 20rpx;
					height: 36rpx;
				}
			}
		}

		.list {
			.list_item {
				height: 106rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				margin: 20rpx 22rpx;
				border-radius: 20rpx;
				position: relative;
				font-size: 36rpx;

				.left {
					display: flex;
					align-items: center;

					image {
						height: 50rpx;
						width: 50rpx;
						margin: 0 18rpx 0 30rpx;
					}
				}

				.right {
					image {
						width: 12rpx;
						height: 24rpx;
						margin-right: 28rpx;
						color: #f1f1f1;
					}
				}

				// &:nth-child(3) {
				// 	margin-top: 46rpx;
				// }
			}

			.first {
				margin-top: 28rpx;
			}
		}

		.footer {
			text-align: center;
			margin-top: 100rpx;
			color: #bdbdbd;
		}
	}
</style>
